/**
 * webpack
 * 
 * 参考：https://www.cnblogs.com/wonyun/p/6030090.html
 */
// 导入path模块: nodejs内置模块
const path = require("path");
const webpack = require('webpack'); // 用于访问内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义js打包的规则
module.exports = {
	mode: 'development',	// "production" | "development" | "none"
	// 入口函数从哪里开始进行编译打包
	entry: {	// string | object | array
		// app: __dirname + "/src/app.js",	// app项目入口
		main: path.join(__dirname, './src/main.js'),	// 入口，表示，要使用 webpack 打包哪个文件
		index: __dirname + "/src/index.js"	// 路径表达方式与上面一样，只是写法不同
	},
	// 编译成功后，把内容输出的位置
	output: {
		// 定义输出的目录:__dirname当前项目根目录，产生一个dist文件夹
		path: __dirname + "/dist/default", 
		// 定义合并的js文件输出的文件名(可指定路径)
		filename: "./js/[name].bundle.js"	// 可以写成如下格式：[name].[contenthash].bundle.js
	},
	module: {	// loader 用于对模块的源代码进行转换（通过 Loader 转换文件）
		rules: [
			{
				test: /\.css$/,	// 识别出哪些文件会被转换:打包规则应用到以css结尾的文件上
				use: ['style-loader', 'css-loader']	// 定义出在进行转换时，应该使用哪个 loader
			},
			{
				test: /\.ts$/,	// 处理.ts结尾的文件 
				use: ['ts-loader']	// 使用哪个loader处理转换
			},
			{
				test: /\.vue$/,
				use: ['vue-loader']	// vue转换器
			}
			// ,
			// {
			// 	test: /\.(js|jsx)$/,
			// 	use: 'babel-loader',
			// },
		]
	},
	plugins: [	// 通过 Plugin 注入钩子
		// index.html
		new HtmlWebpackPlugin({
			chunks: ['index'],	// 引入那个模块文件
			template: "./src/template/index.template.html",	// 源模板文件(基于项目根目录)
			title: "index page demo",
			inject: "head",	// 向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同
			// chunks: ["common"],	// 允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
			minify: false, // 传递 html-minifier 选项给 minify 输出，false就是不使用html压缩
			hash: true	// 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
		}),
		// main.html
		new HtmlWebpackPlugin({ 
			chunks: ['main'],	// 引入那个模块文件
			template: "./src/template/main.template.html",	// 源模板文件(基于项目根目录)
			title: "main page demo",	// 生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值
			filename: 'main.html',	// 输出文件的文件名称，默认为index.html,目录是相对于webpackConfig.output.path路径而言的
			inject: "head",	// 向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同
			hash: true,	// 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
			minify: false, // 传递 html-minifier 选项给 minify 输出，false就是不使用html压缩
			showErrors: true	// 是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试
		})
	]
}